<template>
    <layout title="产品需求信息" :showTabBar="false">
        <x-icon slot="icon" @click="onSave" type="checkmark" style="fill:#fff;position:relative;top:-4px;right:3px;"></x-icon>

        <x-button type="primary" @click.native="onAdd">添加产品</x-button>

        <group v-for="(li,index) in list" :title="li.name">
            <cell :title="li.name">
                <slot>
                    <x-icon type="android-delete" @click="onRemove(index)"></x-icon>
                </slot>
            </cell>
            <x-input type="number" title="销售单价" v-model="li.sale_price"></x-input>
            <cell title="数量">
                <inline-x-number style="display:block;" :min="1" width="50px" button-style="round" v-model="li.num"></inline-x-number>
            </cell>
        </group>

        <group>
            <popup-picker :show.sync="showProduct" :show-cell="false" title="产品列表" :data="productOptions" :columns="2" v-model="selected"
                ref="picker" @on-change="onSelectProduct"></popup-picker>
        </group>

    </layout>

</template>

<script>
    import { XInput, Group, Cell, Divider, PopupPicker, XButton, InlineXNumber } from 'vux'
    import Layout from './Layout.vue'
    import { batch as api, product as productApi } from '../api'
    import { mapGetters } from 'vuex'
    import _ from 'lodash'

    export default {
        name: 'customer',
        components: {
            XInput,
            Group,
            Cell,
            Divider,
            PopupPicker,
            Layout,
            XButton,
            InlineXNumber,
        },
        data() {
            return {
                customer_id: null,
                list: [],
                selected: [],
                showProduct: false,
                product: [],
                productOptions: []
            }
        },
        computed: {
            ...mapGetters(['dicObj'])
        },
        methods: {
            onAdd() {
                this.showProduct = true
            },
            async onSave() {
                let ret = await api.save({
                    customer_id: this.customer_id,
                    products: this.list
                })
                if (!ret.success) {
                    this.$vux.toast.show(ret.message || '保存失败！')
                    return
                }
                this.$vux.toast.show({
                    text: '保存成功',
                    onHide: () => {
                        this.$router.go(-1)
                    }
                })
            },
            async getProduct() {
                let ret = await productApi.index()
                let arr = []
                ret.data.forEach(t => {
                    arr.push({
                        name: `${t.name}      【指导价：${t.guide_price}】`,
                        value: t.id,
                    })
                })
                this.product = ret.data
                this.productOptions = arr
            },
            onSelectProduct(value) {
                let id = value[0]
                let product = _.find(this.product, t => t.id == id)
                this.list.push({
                    name: product.name,
                    num: 1,
                    sale_price: product.guide_price,
                })
            },
            onRemove(i) {
                this.list.splice(i, 1)
            }
        },
        async mounted() {
            this.$store.commit('showBack', true)
            this.$store.commit('selectedTab', 'sale')
            this.customer_id = this.$route.query.customer_id
            await this.getProduct()
        },

    }

</script>
